<template>
  <el-dialog v-model="dialogVisible" :show-close="false" :title="type === true ? '审核' : '查看'">
    <el-form :model="state.dataForm" label-position="left">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证件照:">
            <el-image :src="state.dataForm.idPhoto" class="dialog-avatar" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名:">
            {{ state.dataForm.idName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国籍:">
            {{ nationalityText }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="认证角色:">
            {{ AttestationInfo[state.dataForm.roleType as keyof typeof AttestationInfo] }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件类型:">
            {{ IdTypeInfo[state.dataForm.idType as keyof typeof IdTypeInfo] }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码:">
            {{ state.dataForm.idNumber }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="户籍地址:">
            {{ state.dataForm.domicileAddress }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="居住地址:">
            {{ state.dataForm.currentAddress }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月:">
            {{ state.dataForm.birthDate }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="state.dataForm.coachLevel != ''" label="教练等级:">
            {{ state.dataForm.coachLevel }}
          </el-form-item>
          <el-form-item v-if="state.dataForm.judgeLevel != ''" label="裁判等级:">
            {{ state.dataForm.judgeLevel }}
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mt10">
          <el-form-item label="证件人像面:">
            <el-image :src="state.dataForm.idCardFrontPhoto" class="dialog-avatar" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件国徽面:">
            <el-image :src="state.dataForm.idCardReversePhoto" class="dialog-avatar" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mt10">
          <el-form-item label="教练证照片:" v-if="state.dataForm.coachCardPhoto">
            <el-image :src="state.dataForm.coachCardPhoto" class="dialog-avatar" />
          </el-form-item>
          <el-form-item label="裁判证封面:" v-if="state.dataForm.judgeCardFrontPhoto">
            <el-image :src="state.dataForm.judgeCardFrontPhoto" class="dialog-avatar" />
          </el-form-item>
          <el-form-item label="比赛监督证:" v-if="state.dataForm.matchSupervisionPhoto">
            <el-image :src="state.dataForm.matchSupervisionPhoto" class="dialog-avatar" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mt10">
          <el-form-item label="裁判证内页:" v-if="state.dataForm.judgeCardReversePhoto">
            <el-image :src="state.dataForm.judgeCardReversePhoto" class="dialog-avatar" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form class="mt20" ref="formRef" :model="state.auditForm" label-position="left" v-if="type">
      <el-form-item label="审核状态：" prop="auditStatus">
        <el-select v-model="state.auditForm.auditStatus" placeholder="请选择审核状态">
          <el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="原因填写：" prop="reason">
        <el-input v-model="state.auditForm.reason" :rows="3" type="textarea" placeholder="请输入原因..." />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-if="type" @click="submitBtn(formRef)"> 确定 </el-button>
        <el-button @click="resetForm(formRef)">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onUpdated, computed, reactive, ref } from "vue";
import { FormInstance, ElMessage } from "element-plus";
import { getIdentityDetail, postIdentityAudit } from "@/api/base";
import { AttestationInfo, IdTypeInfo } from "../config/index";
import { AuditStatus } from "@/views/competition/config/enum";
import { AuditStatusText } from "@/views/competition/config/index";
import { nationalityList } from "@/config/data";

const props = defineProps(["id", "type"]);
const emits = defineEmits(["submitChange"]);
const formRef = ref<FormInstance>();
const dialogVisible = ref(false);
const state = reactive<any>({
  dataForm: {},
  auditForm: {
    wxUserRoleId: 0, //身份id
    auditStatus: "completed", //审核状态
    reason: "", //驳回原因
  },
});

const nationalityText = computed(() => {
  const _nationality = nationalityList.find(item => item.value === state.dataForm.nationality)  
  return _nationality ? _nationality.text : state.dataForm.nationality
})

// 审核状态下拉框
const auditStatusOptions = computed(() => {
  return Object.keys(AuditStatusText).map((key) => {
    return {
      label: AuditStatusText[key as AuditStatus].text,
      value: key,
    };
  });
});
// 提交按钮
const submitBtn = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      postIdentityAudit(state.auditForm).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          emits("submitChange");
          dialogVisible.value = false;
        }
      });
    }
  });
};
// 取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (props.type) {
    if (!formEl) return;
    formEl.resetFields();
  }
  dialogVisible.value = false;
};

// 获取数据
const getRoleInfo = () => {
  getIdentityDetail({ wxUserRoleId: props?.id }).then((res) => {
    state.dataForm = res.data || {};
  });
};

onUpdated(() => {
  state.auditForm.wxUserRoleId = props.id;
  getRoleInfo();
});
defineExpose({
  dialogVisible,
});
</script>
<style lang="scss" scoped>
.dialog-avatar {
  width: 100px;
  height: 100px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
